<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/summernote/summernote.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/summernote/summernote-bs3.css}" rel="stylesheet"/>
<body class="white-bg">

	<div class="container-div ui-layout-center">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="form-jiugongge-add">
					<div class="select-list">
						<ul>
							<li>活动名称：<input type="text" name="title" id="title" />
							</li>

							<li>个人抽奖总次数：<input type="text" name="count" id="count" />
							</li>

							<li>个人每次抽奖次数：<input type="text" name="numPerDay"
								id="numPerDay" />
							</li>

							<li class="select-time"><label>时间设置： </label> <input
								type="text" class="time-input" id="starttime"
								placeholder="活动开始时间" name="starttime" /> <span>-</span> <input
								type="text" class="time-input" id="endtime" placeholder="活动结束时间"
								name="endtime" /></li>

							<li>是否关注可参加：<select name="foucsUserCanJoin"
								id="foucsUserCanJoin"
								th:with="type=${@dict.getType('wx_yes_no')}">
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
										th:value="${dict.dictValue}"></option>
							</select>
							</li>

							<li>是否中奖可继续参与：<select name="prizeStatus" id="prizeStatus"
								th:with="type=${@dict.getType('wx_win_join')}">
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
										th:value="${dict.dictValue}"></option>
							</select>
							</li>

							<li>限制参与总人数：<select name="joinNumLimit" id="joinNumLimit"
								th:with="type=${@dict.getType('join_num_limit')}">
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
										th:value="${dict.dictValue}"></option>
							</select>
							</li>

						</ul>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">活动规则：</label>
						<div class="col-sm-8">
							<input id="description" name="description"  type="hidden">
							<div class="summernote"></div>
						</div>
					</div>
					
					<div class="form-group mno">
    							<ul id="tab_menu" class="nav nav-tabs">
    								<li class="active">
    									<a href="#jpDemoOrderProduct" data-toggle="tab">
    										奖品明细
    									</a>
                                    </li>
                                </ul>											
    							<!-- //update-begin--Author:zhangjiaqiang  Date:20160906 for：【插件demo】一对多，明细行间距太大 -->
    							<div id="tab_menu_content" class="tab-content">
    								<div class="tab-pane fade in active" id="jpDemoOrderProduct">
    									<button type="button" id="jpDemoOrderProduct_add" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> 添加</button>
    									<button type="button" id="jpDemoOrderProduct_del" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> 删除</button>
                                        <table class="table table-striped" id="jpDemoOrderProduct_table" style="margin-top:15px;">
    										<thead>
    											<tr>
                                                    <th>ID</th>
                                                    <th>奖项</th>
    												<th>奖品</th>
    												<th>数量</th>
    												<th>中奖概率&nbsp<span style="font-size:3px;color:rgb(72, 167, 231);">(例如0.5,不大于1)</span></th>
    											</tr>
                                            </thead>
    										<tbody>
                                            </tbody>
    									</table>
    								</div>
    							</div>
    						</div>
					
				</form>
				 <table style="display:none;">
        <tbody id="add_jpDemoOrderProduct_template">
        	<tr>
        		<td >
        			<input type="checkbox" name="awarsList[#index#].idCheck"/>
                </td>
        		<td>
    	      	     <select name="awarsList[#index#].awardId" id="awarsList[#index#].awardId"  class="form-control"
								th:with="type=${@awards.getAll()}">
									<option th:each="awards : ${type}" th:text="${awards.awardsName}"
										th:value="${awards.id}"></option>
							</select>
    			</td>		
    			<td>
    		      	 <select name="awarsList[#index#].prizeId" id="awarsList[#index#].prizeId"  class="form-control"
								th:with="type=${@prizes.getAll()}">
									<option th:each="prizes : ${type}" th:text="${prizes.name}"
										th:value="${prizes.id}"></option>
				    </select>
                </td>														
    			<td>
    				<input type="text" name="awarsList[#index#].amount" value="10" class="form-control" ignore="ignore" datatype="n" errorMsg="只能输入整数值"/>
    			</td>
    			<td>
    				<input type="text" value="0.1"  name="awarsList[#index#].probability" class="form-control" ignore="ignore" datatype="/^(0|0\.\d*|1(\.0{1,2})?)$/" errorMsg="只能输入大于等于0到小于等于1之间的数"/>
                </td>
            </tr>
        </tbody>
    </table>  
			</div>
		</div>
	</div>


	<div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
    <script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
    <script th:src="@{/js/wxActJiugongge.js}"></script>
	<script th:inline="javascript">
		var prefix = ctx + "jiugongge/jiugongge";
		
		  $('.summernote').summernote({
				height : '220px',
				lang : 'zh-CN',
				callbacks: {
	                onImageUpload: function (files) {
	                    sendFile(files[0], this);
	                }
	            }
			});
		    
		    // 上传文件
		    function sendFile(file, obj) {
		        var data = new FormData();
		        data.append("file", file);
		        $.ajax({
		            type: "POST",
		            url: ctx + "system/storage/upload",
		            data: data,
		            cache: false,
		            contentType: false,
		            processData: false,
		            dataType: 'json',
		            success: function(result) {
		                if (result.code == web_status.SUCCESS) {
		                	$(obj).summernote('editor.insertImage', result.url, result.fileName);
						} else {
							$.modal.alertError(result.msg);
						}
		            },
		            error: function(error) {
		                $.modal.alertWarning("图片上传失败。");
		            }
		        });
		    }
			
		
		
		
		var icon = "<i class='fa fa-times-circle'></i> ";
		$("#form-jiugongge-add").validate({
			rules : {
				title : {
					required : true,
				},
				count : {
					required : true,
				},
				numPerDay : {
					required : true,
				}
			},
			messages : {
				"title" : {
					required : "活动名称不能为空"
				},
				"count" : {
					required : "个人抽奖总次数不能为空"
				},
				"numPerDay" : {
					required : "个人每次抽奖次数不能为空"
				}
			}
		});

		function submitHandler() {
			if ($.validate.form()) {
				var sHTML = $('.summernote').summernote('code');
				$("#description").val(sHTML);
				$.operate.save(prefix + "/add", $('#form-jiugongge-add')
						.serialize());
			}
		}
	</script>
</body>
</html>
